<template>
  <component :is="wrapperName" :span="span">
    <a-form-item v-bind="$attrs" :hide-asterisk="true" class="page-form-item" :label-col-style="labelColStyle">
      <template #label>
        <div
          class="page-form-item-label flex"
          :class="$attrs['label-align'] === 'right' ? 'justify-end' : 'justify-between'"
          v-if="$attrs.label || $slots.label"
        >
          <div class="label-content flex">
            <span class="page-form-item-label-text">
              <slot name="label" :label="$attrs.label">{{ $attrs.label }}</slot>
            </span>
            <span class="page-form-item-required" v-if="showRequired">*</span>
            <span class="page-form-item-tooltip flex items-center" v-if="labelTooltipContent">
              <a-tooltip :content="labelTooltipContent">
                <icon-question-circle style="font-size: 16px" />
              </a-tooltip>
            </span>
            <span class="page-form-item-tooltip flex items-center" v-if="$slots.iconSlot">
              <slot name="iconSlot"></slot>
            </span>
          </div>
          <div class="label-extra">
            <slot name="label-extra"></slot>
          </div>
        </div>
      </template>
      <template #extra>
        <slot name="extra"></slot>
      </template>
      <slot></slot>
    </a-form-item>
  </component>
</template>

<script setup>
  import { ref, useAttrs, computed, inject } from 'vue'
  const props = defineProps({
    size: {
      type: String,
      default: '1/3',
    },
    wrap: {
      type: Boolean,
      default: false,
    },
    labelTooltipContent: {
      type: String,
    },
    div: {
      type: Boolean,
      default: false,
    },
  })
  let span = ref(24)
  // if (props.size == '1/3') {
  //   span.value = 8
  // }
  // if (props.size == '1/2') {
  //   span.value = 12
  // }
  // if (props.size == '2/3') {
  //   span.value = 16
  // }
  // if (props.size == '1') {
  //   span.value = 24
  // }
  // if (props.size == '1/4') {
  //   span.value = 24 / 4
  // }
  // if (props.size == '1/5') {
  //   span.value = 24 / 5
  // }
  switch (props.size) {
    case '1/3':
      span.value = 8
      break
    case '1/2':
      span.value = 12
      break
    case '2/3':
      span.value = 16
      break
    case '1':
      span.value = 24
      break
    case '1/4':
      span.value = 24 / 4
      break
    case '1/5':
      span.value = 24 / 5
      break
    default:
      span.value = +props.size
      break
  }
  const wrapperName = computed(() => {
    return props.div ? 'div' : 'a-col'
  })

  const attrs = useAttrs()
  const formRules = inject('formRules')
  const mergedRules = computed(() => {
    let rules = []
    let attrRules = attrs.rules
    if (attrRules) {
      rules = attrRules
    } else {
      let field = attrs.field
      if (formRules) {
        for (var k in formRules) {
          if (k == field) {
            rules = formRules[k]
          }
        }
      }
    }
    if (rules instanceof Array) {
      rules = [...rules]
    } else {
      rules = [rules]
    }
    // 返回值为一个数组
    return rules
  })
  const showRequired = computed(() => {
    let isRequired = false
    let required = attrs.required
    // 1 attrs 有 required 值
    if (required || required === '') {
      isRequired = true
    } else {
      // 2 取 rules 中的 required
      isRequired = mergedRules.value.some((item) => item.required)
    }
    if (attrs['hide-asterisk']) {
      isRequired = false
    }
    return isRequired
  })

  const labelColStyle = computed(() => {
    return {
      'margin-bottom': attrs.label ? '4px' : 0,
    }
  })
</script>

<style lang="less" scoped>
  .page-form-item {
    :deep {
      .arco-form-item-label-col {
        .arco-form-item-label {
          width: 100%;
          .page-form-item-label {
            margin-bottom: 0px;
          }
        }
      }
    }
    .page-form-item-required {
      width: 10px;
      height: 10px;
      font-size: 20px;
      color: #f53f3f;
      margin-left: 4px;
    }
    .page-form-item-tooltip {
      margin-left: 4px;
      position: relative;
      top: 1px;
    }
  }
</style>
